<template>
	<view>
		<!-- 头部 -->
		<view class="py-1 font text-center border-bottom bg-white">{{twenty}}秒刷新</view>
		<view class="bg-white seach">
			<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="todatList" :current="current" @change="tabsChange" :is-scroll="false"
						swiperWidth="750"></u-tabs-swiper>
		</view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item>
					<scroll-view scroll-y="true" :style="{height: scrollHeight}" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
						<shipments :shipmentsList="shipmentsList" @order_detail="order_detail" @today_shipments="today_shipments"  @close_shop="close_shop"></shipments>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{height: scrollHeight}" >
						<receiving :receivingList="receivingList" @order_detail="order_detail" @order_record="order_record" @order_flow="order_flow"></receiving>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{height: scrollHeight}">
						<complete :completeList="completeList" @order_detail="order_detail" @order_record="order_record" @order_flow="order_flow"></complete>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{height: scrollHeight}">
						<whole :wholeList="wholeList" @order_detail="order_detail" @today_shipments="today_shipments"  @close_shop="close_shop" @order_record="order_record" @order_flow="order_flow"></whole>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Shipments from "../conponents/order/shipments.vue";
	import Receiving from "../conponents/order/receiving.vue";
	import Complete from "../conponents/order/complete.vue";
	import Whole from "../conponents/order/whole.vue";
	import { yearTime } from '@/components/common/method.js'
	import { todayTime } from '@/components/common/method.js'
	export default {
		components:{
			Shipments,
			Receiving,
			Complete,
			Whole
		},
		data() {
			return {
				da: {
					year: '',
					time: '',
					yearTime: '',
					todayTime: ''
				},
				todatList:[
					{todat_id:1,name:"待发货"},
					{todat_id:2,name:"待收货"},
					{todat_id:3,name:"已完成"},
					{todat_id:4,name:"全部"}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:0, // 屏幕高度
				
				shipmentsList:"", // 待发货列表
				receivingList:"", // 待收货列表
				completeList:"", // 已完成
				wholeList:"", // 全部
				twenty:20, // 20秒
				timer:null, // 倒计时
				u_loadmore:true, // 加载中
				triggered: false, // 下拉刷新
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						console.log(res)
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		computed:{
			// 更新列表
			tab_list(){
				if(this.swiperCurrent==0){
					this.$H.post("admin/orders/list",{
						type:"await_ship",
						start_date:this.da.year,
						end_date:this.da.todayTime,
						}).then(res=>{
						this.shipmentsList=res.data
					})
				}else if(this.swiperCurrent==1){
					this.$H.post("admin/orders/list",{
						type:"shipped",
						start_date:this.da.year,
						end_date:this.da.todayTime,
						}).then(res=>{
						this.receivingList=res.data
					})
				}else if(this.swiperCurrent==2){
					this.$H.post("admin/orders/list",{
						type:"finished",
						start_date:this.da.year,
						end_date:this.da.todayTime,
						}).then(res=>{
						this.completeList=res.data
					})
				}else if(this.swiperCurrent==3){
					this.$H.post("admin/orders/list",{
						start_date:this.da.year,
						end_date:this.da.todayTime,
					}).then(res=>{
						this.wholeList=res.data
					})
					
				}
			}
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
			    console.log("onpulling", e);
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
			       this.updata()
				   this.triggered = false;
				   this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			    console.log("onRestore");
			},
			// 更新列表
			updata(){
				if(this.swiperCurrent==0){
					this.$H.post("admin/orders/list",{
						type:"await_ship",
						start_date:this.da.year,
						end_date:this.da.todayTime,
						}).then(res=>{
						this.shipmentsList=res.data
					})
				}else if(this.swiperCurrent==1){
					this.$H.post("admin/orders/list",{
						type:"shipped",
						start_date:this.da.year,
						end_date:this.da.todayTime,
						}).then(res=>{
						this.receivingList=res.data
					})
				}else if(this.swiperCurrent==2){
					this.$H.post("admin/orders/list",{
						type:"finished",
						start_date:this.da.year,
						end_date:this.da.todayTime,
						}).then(res=>{
						this.completeList=res.data
					})
				}else if(this.swiperCurrent==3){
					this.$H.post("admin/orders/list",{
						start_date:this.da.year,
						end_date:this.da.todayTime,
					}).then(res=>{
						this.wholeList=res.data
					})
					
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.updata()
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 时间
			clear_timer(){
				if(this.timer) {
					clearTimeout(this.timer);  
					this.timer = null;  
				}
			},
			
			// 待发货
			order_send(item){
				uni.navigateTo({
					url:"/pagesA/order/order-today-send?order_id="+item.order_id
				})
				this.clear_timer()
			},
			// 发货
			today_shipments(item){
				console.log(item)
				uni.navigateTo({
					url:"/pagesA/order/order-today-shipments?order_id="+item.order_id
				})
				this.clear_timer()
			},
			// 关闭订单
			close_shop(item){
				uni.navigateTo({
					url:"/pagesA/order/order-close?order_id="+item.order_id
				})
				this.clear_timer()
			},
			// 操作记录
			order_record(item){
				uni.navigateTo({
					url:"/pagesA/order/order-record?order_id="+item.order_id
				})
				this.clear_timer()
			},
			// 物流信息
			order_flow(item){
				uni.navigateTo({
					url:"/pagesA/order/order-flow?order_id="+item.order_id
				})
				this.clear_timer()
			},
			// 详情
			order_detail(item){
				uni.navigateTo({
					url:"/pagesA/order/order-today-send-detail?order_id="+item.order_id
				})
				this.clear_timer()
			},
			
		},
		created() {
			this.da.year = yearTime('year')
			this.da.time = yearTime('time')
			this.da.yearTime = yearTime('yearTime')
			this.da.todayTime = todayTime()
		},
		onUnload() {
			if(this.timer) {  
				clearTimeout(this.timer);  
				this.timer = null;  
			}  
		},
		onHide() {
			if(this.timer) {
				clearTimeout(this.timer);  
				this.timer = null;  
			}  
		},
		onShow() {
			if(this.timer>=0){
				this.timer=setInterval(()=>{
					if(this.twenty<=20&&this.twenty>0){
						this.twenty--
					}else if(this.twenty==0){
						this.$H.post("admin/orders/list",{
							type:"await_ship",
							start_date:this.da.year,
							end_date:this.da.todayTime,
							}).then(res=>{
							this.shipmentsList=res.data
							console.log(res)
							uni.showLoading({
							    title: '加载中'
							});
							this.twenty=20
						})
					}
					uni.hideLoading();
				},1000)
			}
			this.$H.post("admin/orders/list",{
				type:"await_ship",
				start_date:this.da.year,
				end_date:this.da.todayTime,
				}).then(res=>{
				this.shipmentsList=res.data
				console.log(res)
			})
		},
		onLoad() {
			this.$H.post("admin/orders/list",{
				type:"await_ship",
				start_date:this.da.year,
				end_date:this.da.todayTime,
				}).then(res=>{
				this.shipmentsList=res.data
				this.u_loadmore=false 
			})	
			// 下拉刷新
			this._freshing = false;
		}
	}
</script>

<style>
	.active_today{
		color: #ff0000;
		border-bottom: 5rpx solid #ff0000;
	}
	.user_img{
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background-color: #f6efef;
	}
	.today_hot{
		width: 140upx;
		height: 140upx;
	}
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
</style>
